<template>
	<view style="height: 100%">
		<view class="record-wrap">
			<view class="record-wrap__head">
				<view class="head-search flex-row-between">
					<view class="head-search__title" @tap="showSearchPopup">
						{{ activeText }}
					</view>
					<view class="head-search__title" @tap="showDatePopup">
						{{ queryParam.month }}
					</view>
					<view class="rule flex-row-center"  @tap="toRules" style="font-size: 30rpx;font-family: PingFang SC-Medium, PingFang SC;font-weight: 400;color: #6DB12E;">
						详细规则
						<view class="arrows_r"></view>
					</view>
				</view>
				<view class="head-tabs flex-row-between">
					<view class="head-tabs__item flex-column-start">
						<view class="count">{{ rewardTotalInfo.spreadTotalNum || '0' }}</view>
						<view class="title">推广(人)</view>
					</view>
					<view class="head-tabs__item flex-column-start">
						<view class="count">{{ rewardTotalInfo.couponNum || '0' }}</view>
						<view class="title">优惠券(张)</view>
					</view>
					<view class="head-tabs__item flex-column-start">
						<view class="count">{{ rewardTotalInfo.integral || '0' }}</view>
						<view class="title">积分(分)</view>
					</view>
					<view class="head-tabs__item flex-column-start">
						<view class="count">{{ rewardTotalInfo.rewardAmount || '0' }}</view>
						<view class="title">奖励金(元)</view>
					</view>
					<view class="head-tabs__item flex-column-start">
						<view class="count">{{ rewardTotalInfo.cardNum || '0' }}</view>
						<view class="title">卡(张)</view>
					</view>
					<!-- <view class="head-tabs__item flex-column-start">
						<view class="count">{{ rewardTotalInfo.serveFreeTimes || '0' }}</view>
						<view class="title">免服务费</view>
					</view> -->
				</view>
			</view>

			<view class="record-wrap__list" v-if="promotionList.length > '0'">
				<view class="record_list">
					<view class="list_item" v-for="(item, index) in promotionList" :key="index">
						<view class="item_top flex-row-between">
							<view class="title">{{ item.spededUserName }}</view>
							<view class="date">{{ item.inviteTime }}</view>
						</view>

						<view class="item_bottom flex-row-start">
							<text v-if="item.userRewardIntegral">{{ item.userRewardIntegral }}积分、</text>
							<!-- <text v-if="item.couponAmount">{{ item.couponAmount }}元优惠券、</text> -->
							<text v-if="item.userCouponCount">{{ item.userCouponCount }}张优惠券、</text>
							<text v-if="item.userCardCount">{{ item.userCardCount }}张卡、</text>
							<text v-if="item.userRewardAmount">{{ item.userRewardAmount }}元奖励金、</text>
							<!-- <text v-if="item.userFreeServeTimes">{{ item.userFreeServeTimes }}次免服务费</text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="nodata_wrap flex-column-start" v-else>
				<image class="img"
					src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/nodata.png"></image>
				<view class="desc" style='color:#606266'>暂无数据</view>
			</view>
		</view>


		<!-- <u-datetime-picker visibleItemCount='9' ref="datetimePicker" :show='showTime' mode="year-month"
			@cancel="onCancel" @confirm="onConfirm" /> -->

		<u-datetime-picker :show="showTime" mode="year-month" v-model="currentDate" :closeOnClickOverlay='true'
			@close="onClose" @cancel='onCancel' @confirm="onConfirm" :itemHeight="100" />
		<u-popup :show="searchPopup" mode="top" :custom-style="{
			'width':'702rpx','margin':'120rpx 24rpx 0','border-radius': '16rpx'
		}" @close="closeSearchPopup">
			<view class="search-popup">
				<view :class="active === item.value ? 'title flex-row-center on' : 'title flex-row-center'"
					:data-value="item.value" @tap="onSelect" v-for="(item, index) in options" :key="index">
					{{ item.label }}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import zpMixins from '@/uni_modules/zp-mixins/index';
	// import vanDatetimePicker from './@vant/weapp/datetime-picker/index';
	// import vanPopup from './@vant/weapp/popup/index';
	// marketing/pages/promotion/promotion_record/promotion_record.ts
	import {
		formatYMTime
	} from '../../../../utils/util';
	import {
		getRewardTotal,
		getPromotionList
	} from '../../../../api/marketing/promotion';
	export default {
		components: {
			// vanDatetimePicker,
			// vanPopup
		},
		data() {
			return {
				activeText: '全部',
				active: 0,
				options: [{
						label: '全部',
						value: 0
					},
					// {
					// 	label: '免服务费',
					// 	value: 3
					// },
					{
						label: '优惠券',
						value: 1
					},
					{
						label: '奖励金',
						value: 4
					},
					{
						label: '积分',
						value: 2
					},
					{
						label: '卡',
						value: 5
					},
					// {
					// 	label: '权益',
					// 	value: 6
					// }
				],

				currentDate: new Date().getTime(),
				showTime: false,
				dateText: '123',
				searchPopup: false,
				rewardTotalInfo: {
					couponAmount: '',
					integral: '',
					rewardAmount: '',
					serveFreeTimes: ''
				},
				queryParam: {
					current: 1,
					size: 10,
					month: formatYMTime(new Date().getTime()),
					rewardType: 0
				},
				promotionList: [],
				totalPage: 0
			};
		},
		onLoad() {
			this.getList();
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onReachBottom() {
			if (this.queryParam.current < this.totalPage) {
			    this.setData({
			        queryParam: {
			            ...this.queryParam,
			            current: this.queryParam.current + 1
			        },
			    })
			    this.getList()
			}else{
				uni.showToast({
					title: '已经到底了',
					icon: 'none',
					duration: 2000
				});
			}
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			closeSearchPopup() {
				this.setData({
					searchPopup: false
				});
			},

			showDatePopup() {
				this.setData({
					showTime: true
				});
			},

			showSearchPopup() {
				this.setData({
					searchPopup: true
				});
			},

			onInput(event) {
				// console.log(event, 2323)
				// let dateArr = formatYMD(new Date(event.detail)).split('-')
				// let dateText = `${dateArr[0]} 年 ${dateArr[0]} 月`

				this.month = formatYMTime(event.detail);
				this.setData({
					currentDate: event.detail
					// 'queryParam.month':this.data.month
				});
			},

			onCancel() {
				this.setData({
					showTime: false
				});
			},
			onConfirm(e) {
				console.log(e, '这是什么')
				this.resetQueryParam();
				this.setData({
					showTime: false,
					'queryParam.month': formatYMTime(e.value) || ''
				});
				this.getList();
			},
			//推广规则
			toRules() {
				uni.navigateTo({
					url: '../rules_details/rules_details'
				});
			},
			// 累计推广奖励
			async getRewardTotalInfo() {
				const _params = {
					plUserId: uni.getStorageSync('memberId')
				};
				const {
					code,
					data
				} = await getRewardTotal(_params).catch((err) => {});
				if (code === 200) {
					this.setData({
						rewardTotalInfo: data
					});
				}
			},

			// 推广记录
			async getList() {
				if (this.queryParam.rewardType === 0) {
					delete this.queryParam.rewardType;
				}
				this.getRewardTotalInfo();
				const {
					code,
					data
				} = await getPromotionList(this.queryParam).catch((err) => {});
				if (code === 200) {
					this.totalPage = data.pages
					this.promotionList = [...this.promotionList, ...data.records]
					
					// this.queryParam.current++;
					// this.setData({
					// 	promotionList: [...this.promotionList, ...data.records],
					// 	totalPage: data.pages
					// });
				}
			},

			resetQueryParam() {
				this.queryParam.current = 1;
				this.promotionList = [];
			},

			onSelect(e) {
				const {
					value
				} = e.currentTarget.dataset;
				this.resetQueryParam();
				this.queryParam.rewardType = value;
				this.setData({
					active: value,
					activeText: this.options.find((item) => item.value === value).label,
					searchPopup: false
				});
				this.getList();
			},

			onClose() {
				console.log('占位：函数 onClose 未声明');
			}
		}
	};
</script>
<style lang="less" scoped>
	/* marketing/pages/promotion/recruit_plan/recruit_plan.wxss */
	@import "../../../../commin/flex.less";

	page {
		background: #f5f7fa;
	}

	.arrows_r {
		width: 15rpx;
		height: 15rpx;
		border-top: 1px solid #6DB12E;
		border-right: 1px solid #6DB12E;
		transform: rotate(45deg);
	}

	.record-wrap {
		padding: 0 24rpx;
		padding-top: 234rpx;
	}

	.record-wrap .record-wrap__head {
		padding-bottom: 16rpx;
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		z-index: 1;
		background: #f5f7fa;
		padding: 0 24rpx 16rpx;
		box-sizing: border-box;
	}

	.record-wrap .record-wrap__head .head-search {
		height: 112rpx;
		padding: 0 33rpx;
	}

	.record-wrap .record-wrap__head .head-search__title {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #303133;
		position: relative;
		padding-right: 50rpx;
	}

	.record-wrap .record-wrap__head .head-search__title::after {
		border: 12rpx solid transparent;
		border-color: #909399 transparent transparent transparent;
		position: absolute;
		content: '';
		right: 0;
		top: 50%;
	}

	.record-wrap .record-wrap__head .head-tabs {
		height: 106rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx;
		padding: 0 40rpx;
		line-height: 1;
	}

	.record-wrap .record-wrap__head .head-tabs__item .count {
		font-weight: bold;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #303133;
		margin-bottom: 18rpx;
	}

	.record-wrap .record-wrap__head .head-tabs__item .title {
		font-size: 24rpx;
		color: #606266;
	}

	.record-wrap .record-wrap__list {
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		box-sizing: border-box;
		border-radius: 16rpx;
		padding: 0rpx 32rpx;
	}

	.record-wrap .record-wrap__list .record_list .list_item {
		padding: 36rpx 0;
		border-bottom: 1rpx dotted #c0c4cc;
	}

	.record-wrap .record-wrap__list .record_list .list_item:last-child {
		border: 0;
	}

	.record-wrap .record-wrap__list .record_list .list_item .item_top {
		margin-bottom: 22rpx;
	}

	.record-wrap .record-wrap__list .record_list .list_item .item_top .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #303133;
	}

	.record-wrap .record-wrap__list .record_list .list_item .item_top .date {
		font-size: 24rpx;
		font-weight: 400;
		color: #606266;
	}

	.record-wrap .record-wrap__list .record_list .list_item .item_bottom {
		font-size: 26rpx;
		color: #fc724c;
	}

	.record-wrap .record-wrap__list .record_list .list_item .item_bottom text {
		font-weight: bold;
	}

	.search-popup {
		height: 200rpx;
		display: grid;
		grid-template-rows: 100rpx 100rpx;
		grid-template-columns: 186rpx repeat(2, 1fr);
		align-items: center;
		justify-content: center;
		padding: 6rpx 10rpx;
		box-shadow: 3rpx 5rpx 20rpx 0px rgba(192, 196, 204, 0.5);
	}

	.search-popup .title {
		height: 100%;
		font-size: 28rpx;
		color: #606266;
	}

	.search-popup .title.on {
		font-weight: bold;
		color: #6DB12E;
	}

	.search-popup .title:nth-child(1) {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 3;
		border-right: 1rpx solid #dcdfe6;
		margin-right: 10rpx;
	}

	.search-popup .title:nth-child(2) {
		border-bottom: 1rpx solid #dcdfe6;
	}

	.search-popup .title:nth-child(3) {
		border-bottom: 1rpx solid #dcdfe6;
	}
</style>